<template>
    <section>
        <!--选择-->
        <el-col :span="24" class="tssel">
          <span class="tips">请为当前角色</span>
          <el-tag type="primary">{{role.role_name}}</el-tag>
          <span class="tips">配置租户</span>
            <el-select style="width: 115px;" v-model="tenant_id" placeholder="请选择" size="mini" @change="changeTab">
              <el-option
                        v-for="item in role.tenant"
                        :label="item.tenant_name"
                        :value="item.tenant_id">
                </el-option>
            </el-select>
           <span class="tips">的数据权限</span>
        </el-col>
        <!--标签页-->
        <el-col>
            <el-tabs style="width:100%;" v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="Hdfs" name="hdfs" :disabled="cardTab.hdfs">
                    <Page212tb type="hdfs" :privdatas="privdata.hdfs"></Page212tb>
                </el-tab-pane>
                <el-tab-pane label="Yarn" name="yarn" :disabled="cardTab.yarn">
                    <Page212tb type="yarn" :privdatas="privdata.yarn"></Page212tb>
                </el-tab-pane>
                <el-tab-pane label="Hive" name="hive" :disabled="cardTab.hive">
                    <Page212tb type="hive" :privdatas="privdata.hive"></Page212tb>
                </el-tab-pane>
                <el-tab-pane label="Hbase" name="hbase" :disabled="cardTab.hbase">
                    <Page212tb type="hbase" :privdatas="privdata.hbase"></Page212tb>
                </el-tab-pane>
                <el-tab-pane label="Kafka" name="kafka" :disabled="cardTab.kafka">
                    <Page212tb type="kafka" :privdatas="privdata.kafka"></Page212tb>
                </el-tab-pane>
            </el-tabs>
        </el-col>
    </section>
</template>

<script>
  import util from '../../common/util'
  import dao from '../../common/dao'
  import Page212tb from './Page212tb.vue'

  export default {
    components: {Page212tb},
    data() {
      return {
        role: {
          role_id: "",
          role_name: "",
          tenant: []
        },
        tenant_id: "",
        activeName: "",
        cardTab: {
          hdfs: true,
          yarn: true,
          hive: true,
          hbase: true,
          kafka: true
        },
        privdata: {
          hdfs: {},
          yarn: {},
          hive: {},
          hbase: {},
          kafka: {}
        },
        plugins_key: ['hdfs', 'yarn', 'hive', 'hbase', 'kafka'],
        selectedArray: [],
        privDatas: [{
          priv_data_serv_id: "",
          priv_data_serv_name: "",
          ranger_serv_id: "",
          role_id: "",
          tenant_id: "",
          priv_data_serv_type: "",
          create_time: "",
          update_time: "",
          operator_user_name: "",
          operator_user_id: ""
        }],
      }
    },
    methods: {
      pageInit(){ //获取页面跳转参数

        //let query = this.$store.state.route.query || {};
        //this.role = query.role;
        this.role = util.fetch('page212_role');
        this.tenant_id = this.role.tenant[0].tenant_id;
        this.changeTab();

      },
      changeTab (val) {
        //根据租户的组件切换table
        let tenant_plugins = "";
        util.save('page212_tenement', this.tenant_id);
        this.role.tenant.map(tenant => {
          if (tenant.tenant_id == this.tenant_id) {
            tenant_plugins = tenant.tenant_plugins;
          }
        });
        for (let i in this.cardTab) {
          this.cardTab[i] = true;
        }
        let pluginsArray = tenant_plugins.split(",");
        let plugins_key = this.plugins_key;
        for (let i in  pluginsArray) {
          let plugins = pluginsArray[i];
          plugins_key.map(pk => {
            if (plugins.toUpperCase() === pk.toUpperCase()) {
              this.cardTab[pk] = false;
            }
          });
        }
        for (let i = 0; i < plugins_key.length; i++) {
          let pk = plugins_key[i];
          if (!this.cardTab[pk]) {
            this.activeName = pk;
            break
          }
        }
        this.handleClick();
      },
      handleClick (val) {
        //根据角色和租户id查询所有服务
        if (this.role.role_id != null && this.tenant_id != null) {
          let e = {
            role_id: this.role.role_id,
            tenant_id: this.tenant_id
          };
          this.privdata[this.activeName] = e;
        }
      }
    },
    mounted () {
      this.pageInit();
    }
  }
</script>

<style scoped>
    .tssel {
        margin-bottom: 10px;
    }
  .tips {
    color: #8798b1;
    font-size: 14px;
  }
</style>